<template>
  <monitor-page
    ref="monitor"
    type="energyMonitor"
    :queryFormItem="queryFormItems"
    :collapseFormItem="collapseFormItems"
    @queryPush="queryPush"
    @workShopName="workShopName"
    @energyPoint="energyPoint"
  />
</template>

<script>
import monitorPage from '../components/monitorPage.vue'
import { typeClassName } from "@/pages/config/classNameMap";
import mixin from "@/pages/components/mixins/mixin";

export default {
  components: { monitorPage },
  mixins: [mixin],

  computed: {
    queryFormItem() {
      return [
        {
          key: "searchType",
          title: {
            "zh-CN": "查找类型",
            "en-US": "searchType",
          }[this.G_Locale],
          minWidth: 100,
          align: "center",
          config: { type: "select", options: this.searchOptions },
        },
        {
          key: "scale",
          title: {
            "zh-CN": "粒度",
            "en-US": "scale",
          }[this.G_Locale],
          minWidth: 100,
          align: "center",
          config: { type: "select", options: this.scaleOptions },
        },
        {
          key: "timeRange",
          title: {
            "zh-CN": "时间区间",
            "en-US": "timeRange",
          }[this.G_Locale],
          minWidth: 100,
          align: "center",
          config: { type: "datetimeRange" },
        },
      ];
    },
    collapseFormItem() {
      return [
        {
          key: "searchType",
          title: {
            "zh-CN": "查找类型",
            "en-US": "searchType",
          }[this.G_Locale],
          minWidth: 100,
          align: "center",
          config: { type: "select", options: this.searchOptions },
        },
         {
           key: "scale",
           title: {
             "zh-CN": "粒度",
             "en-US": "scale",
           }[this.G_Locale],
           minWidth: 100,
           align: "center",
           config: { type: "select", options: this.scaleOptions },
         },
         {
           key: "timeRange",
           title: {
             "zh-CN": "时间区间",
             "en-US": "timeRange",
           }[this.G_Locale],
           minWidth: 100,
           align: "center",
           config: { type: "datetimeRange" },
         },
      ];
    },
    geography() {
      return [
        {
          key: "workshop",
          title: {
            "zh-CN": "车间",
            "en-US": "workshop",
          }[this.G_Locale],
          minWidth: 100,
          align: "center",
          config: { type: "select", options: this.workOptions },
        },
        {
          key: "equipment",
          title: {
            "zh-CN": "设备",
            "en-US": "equipment",
          }[this.G_Locale],
          minWidth: 100,
          align: "center",
          config: { type: "select", options: this.equipOptions },
        },
        {
          key: "point",
          title: {
            "zh-CN": "点位",
            "en-US": "point",
          }[this.G_Locale],
          minWidth: 100,
          align: "center",
          config: { type: "select", options: this.pointOptions },
        }
      ]
    }
  },
  data() {
    return {
      queryFormItems: [],
      collapseFormItems: [],
      searchOptions: [
        { label: "按能源类型", value: "energyType" },
        { label: "按地理层级", value: "geography" },
      ],
      typeOptions: [],
      scaleOptions: [
        { label: "分", value: "分" },
        { label: "时", value: "时" },
        { label: "天", value: "天" },
        { label: "月", value: "月" },
        { label: "年", value: "年" },
      ],
      workOptions: [
        { label: '中粗粉车间', value: '中粗粉车间' },
        { label: '超细粉车间', value: '超细粉车间' },
        { label: '气体站', value: '气体站' }
      ],
      equipOptions: [],
      pointOptions: [],
      typeClassObject: null, // 能源类型实例
    }
  },
  created() {
    this.typeClassObject = this.$modelObject.create(
      `${typeClassName["energyType"].modelType}`
    );
    this.setOptionsByHier("energyType", this.typeClassObject, "typeOptions", {
      label: "sf_name",
      value: "sf_code",
    });
    this.queryFormItems = this.queryFormItem
    this.collapseFormItems = this.collapseFormItem
  },
  methods: {
    queryPush(flag) {
      this.queryFormItems = structuredClone(this.queryFormItem)
      this.collapseFormItems = structuredClone(this.collapseFormItem)
      if(flag === 'type') {
        let obj = {
           key: "energyType",
           title: {
             "zh-CN": "能源类型",
             "en-US": "energyType",
           }[this.G_Locale],
           minWidth: 100,
           align: "center",
           config: { type: "select", options: this.typeOptions },
         }
        this.queryFormItems.push(obj)
        this.collapseFormItems.push(obj)
      } else if (flag === 'geography') {
        this.queryFormItems.push(...this.geography)
        this.collapseFormItems.push(...this.geography)
      }
    },
    workShopName(val) {
      // 拿到车间名
      let obj = { workshop: val }
      this.$api.Custom.getEquipByWorkShop(obj).then((res) => {
        if (!res) {
          return;
        }
        let arr = res.map(item => {
          return {
            label: item.values.sf_name,
            value: item.id
          }
        })
        this.equipOptions = arr
        this.queryPush('geography')
      });
    },
    energyPoint(val) {
      this.$api.Custom.energyPoint({equipment: val}).then((res) => {
        if (!res) {
          return;
        }
        let arr = res.map(item => {
          return {
            label: item.values.sf_energyName,
            value: item.values.point
          }
        });
        this.pointOptions = arr
        this.queryPush('geography')
      })
    }
  }
}
</script>

<style scoped lang="scss">

</style>
